<template>
	<div>
		<el-row>
			<el-tabs v-loading="loading" type="border-card">
				<el-tab-pane v-for="(item,index) in tab_list" :key="index" :label="item.label">
					<el-row :gutter="1" type="flex" style="margin: 20px 0 ;">
						<el-col :span="5">
							<el-button @click="click_add_SlotInsert(1)" type="primary">添加批次</el-button>
						</el-col>
					</el-row>

					<el-row>
						<el-table :data="tableData" border style="width: 100%">
							<el-table-column label="Slotnum" prop="Slotnum">
							</el-table-column>
							<el-table-column label="Title" prop="Title">
							</el-table-column>
							<el-table-column label="Duration" prop="Duration">
							</el-table-column>
							<el-table-column label="Date" prop="Date">
							</el-table-column>
							<el-table-column label="State" prop="State">
							</el-table-column>
							<el-table-column label="Operation">
								<template slot-scope="scope">
									<el-button @click="CheckAuctionList(scope.row)" type="primary" size="small">查看
									</el-button>
									<el-button @click="click_add_SlotInsert(2,scope.row)" type="success" size="small">编辑
									</el-button>
									<el-button @click="post_SlotDel(scope.row.id)" type="danger" size="small">删除
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-row>
					<el-row style="margin: 20px 0 ;" type="flex" justify="center">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page.sync="pagination_form.currentPage3" :page-size="100"
							:hide-on-single-page="true" layout="prev, pager, next, jumper" :total="1000" background>
						</el-pagination>
					</el-row>
				</el-tab-pane>
			</el-tabs>
		</el-row>

		<el-dialog :title="dialog_form.title" :visible.sync="dialog_form.dialogVisible" width="30%"
			:before-close="handleClose">
			<el-form ref="form" :model="SlotInsert_add_form" label-width="80px">
				<el-form-item label="Title">
					<el-input v-model="SlotInsert_add_form.Title"></el-input>
				</el-form-item>
				<el-form-item label="Date">
					<el-date-picker type="date" placeholder="选择日期" v-model="SlotInsert_add_form.Date"
						style="width: 100%;">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="Duration">
					<el-input v-model="SlotInsert_add_form.Duration"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="post_SlotInsert_sub_form">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				dialog_form: { //对话框表单
					dialogVisible: false,
					title: "添加批次",
					type: 1 //1添加2修改
				},
				SlotInsert_add_form: { //添加表单 修改表单
					Title: '',
					Date: '',
					Duration: '',
					State: 'assigned'
				},
				pagination_form: { //分页表单
					currentPage3: 1, //进入时的页码
					page: 1, //页码 默认为 1
				},
				tab_list: [ //tab的列表
					{
						id: 1,
						label: 'User List'
					},
				],
				tableData: [], //批次列表数据
				/* { tableData数据
					id: 1,
					title: "Fst Test",
					date: "2022-07-09 08:00:00",
					state: "current",
					slotnum: "生成的",
					duration: 24
				} */
			}
		},
		mounted() {
			this.init()

		},
		methods: {

			// 表单提交事件 上
			async post_SlotDel(id) { //删除表单
				this.loading = true
				let data_del = this.$model.post('/slot/deletebyid', {
					id: id
				})
				let reList = await this.$model.post('/slot/getlist', { //参数不一定对
					page: this.pagination_form.page, //猜的页码
					pagesize: 1
				})

				let reListPageInfo = reList.pageInfo
				if (reList.msg == 'success') {
					this.tableData = reListPageInfo.list
				}
				this.loading = false
				this.dialog_form.dialogVisible = false
			},
			async post_SlotInsert_sub_form() { //表单提交 触发 确定点击事件
				let form = this.SlotInsert_add_form
				let date = this.switch_date(form.Date).hasTime
				form.Date = date
				this.loading = true
				switch (this.dialog_form.type) {
					case 1: //表单添加
						let data_add = await this.$model.post('/slot/insert', this.SlotInsert_add_form)
						if (data_add.msg == "insert success") {
							let reList = await this.$model.post('/slot/getlist', { //参数不一定对
								page: this.pagination_form.page, //猜的页码
								pagesize: 1
							})
							let reListPageInfo = reList.pageInfo
							if (reList.msg == 'success') {
								this.tableData = reListPageInfo.list
							}
							this.loading = false
							this.dialog_form.dialogVisible = false
						}
						break
					case 2:
						let data_up = await this.$model.post('/slot/updatebyid', this.SlotInsert_add_form)
						if (data_up.msg == 'update success!') {
							let reList = await this.$model.post('/slot/getlist', { //参数不一定对
								page: this.pagination_form.page, //猜的页码
								pagesize: 1
							})
							let reListPageInfo = reList.pageInfo
							if (reList.msg == 'success') {
								this.tableData = reListPageInfo.list
							}
							this.loading = false
							this.dialog_form.dialogVisible = false
						}
						break
				}
			},
			switch_date(msec) { //时间格式转换
				let datetime = new Date(msec);
				let year = datetime.getFullYear();
				let month = datetime.getMonth();
				let date = datetime.getDate();
				let hour = datetime.getHours();
				let minute = datetime.getMinutes();
				let second = datetime.getSeconds();

				let result1 = year +
					'-' +
					((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
					'-' +
					((date + 1) < 10 ? '0' + date : date) +
					' ' +
					((hour + 1) < 10 ? '0' + hour : hour) +
					':' +
					((minute + 1) < 10 ? '0' + minute : minute) +
					':' +
					((second + 1) < 10 ? '0' + second : second);

				let result2 = year +
					'-' +
					((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
					'-' +
					((date + 1) < 10 ? '0' + date : date);

				let result = {
					hasTime: result1,
					withoutTime: result2
				};

				return result;
			},
			handleClose(done) { //对话框取消事件
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			click_add_SlotInsert(res, id = null) { //res:1添加批次 res:2修改批次
				switch (res) {
					case 1:
						this.dialog_form = {
							dialogVisible: true,
							title: "添加批次",
							type: 1 //1添加2修改
						}
						break
					case 2:
						console.log(id)
						this.SlotInsert_add_form = id
						this.dialog_form = {
							dialogVisible: true,
							title: "修改批次",
							type: 2 //1添加2修改
						}
				}
			},
			// 表单提交事件 下

			// 请求 上
			init() { //数据初始化
				this.post_SlotGetlist()
			},
			async post_SlotGetlist() { //获取批次列表
				let listJson = await this.$model.post('/slot/getlist', {
					page: 1,
					pagesize: 1
				})
				let listJsonPageInfo = listJson.pageInfo
				if (listJson.msg == 'success') {
					this.tableData = listJsonPageInfo.list
				}
			},
			// 请求 下

			CheckAuctionList(res) {
				this.$router.push('/Auction/AuctionItem/List?id=' + res.id)
			},

			//分页 上
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.page = val
			},
			//分页 下




		}
	}
</script>

<style>
	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
</style>
